<template>
  <el-card>
    <div class="search-query">
      <el-form :inline="true" :model="searchForm" ref="searchFormRef">
        <el-form-item label="中文名称" prop="label">
          <el-input
            v-model="searchForm.label"
            placeholder="中文名称"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleSearchReset(searchFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-btn">
      <el-space :size="10">
        <el-button type="primary" @click="handleAddView">新增</el-button>
        <el-button type="danger" @click="handleBatchDelete">批量删除</el-button>
      </el-space>

      <el-button type="primary" @click="handleReflesh">刷新</el-button>
    </div>

    <el-table
      border
      :data="permissionData"
      v-loading="loading"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="800"
      row-key="id"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        prop="data.label"
        label="中文名称"
        show-overflow-tooltip
        width="180"
      />
      <el-table-column prop="data.name" label="名称" />
      <el-table-column prop="data.type" label="菜单类型">
        <template v-slot="scope" #default>
          <el-text v-if="scope.row.data.type == 1" type="primary">目录</el-text>
          <el-text v-if="scope.row.data.type == 2" type="success">菜单</el-text>
          <el-text v-if="scope.row.data.type == 3" type="info">按钮</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="data.path" label="路由地址" />
      <el-table-column prop="data.url" label="访问地址" />
      <el-table-column prop="data.component" label="组件" />
      <el-table-column prop="data.code" label="权限标识" />
      <el-table-column prop="data.redirectPath" label="重定向路径" />
      <el-table-column prop="data.icon" label="图标" />
      <el-table-column prop="data.sort" label="排序号" />
      <el-table-column prop="data.createTime" label="创建时间" />
      <el-table-column prop="data.updateTime" label="更新时间" />
      <el-table-column fixed="right" label="操作">
        <template v-slot="scope" #default>
          <el-button type="success" @click="handleEdit(scope.row.data)" link
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row.data)" link
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-pagination
      v-model:current-page="permissionData.currentPage"
      v-model:page-size="permissionData.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      background="background"
      layout="total, sizes, prev, pager, next,jumper"
      :total="permissionData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
  </el-card>

  <!-- 新增/编辑 -->
  <el-dialog
    v-model="visible"
    :title="saveForm.id ? '编辑' : '新增'"
    width="500"
    :close-on-click-modal="false"
  >
    <el-form
      :model="saveForm"
      label-position="top"
      :rules="rules"
      ref="saveFormRef"
    >
      <el-form-item label="父级菜单">
        <el-tree-select
    v-model="saveForm.parentId"
    :data="parentMenu"
    check-strictly
    :render-after-expand="false"
    :props="{'value': 'id'}"
  />
      </el-form-item>
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="saveForm.type" @change="handleChangeType">
          <el-radio :value="1">目录</el-radio>
          <el-radio :value="2">菜单</el-radio>
          <el-radio :value="3">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="中文名称" prop="label">
        <el-input v-model="saveForm.label" placeholder="中文名称" clearable />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="saveForm.name" placeholder="名称" clearable />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="saveForm.code" placeholder="权限标识" clearable />
      </el-form-item>
      <el-form-item label="路由地址" prop="path" v-if="typeRadio !=3">
        <el-input v-model="saveForm.path" placeholder="路由地址" clearable />
      </el-form-item>
      <el-form-item label="访问路径" prop="url" v-if="typeRadio != 1">
        <el-input v-model="saveForm.url" placeholder="访问路径" clearable />
      </el-form-item>
      <el-form-item label="组件" prop="component" v-if="typeRadio != 1&& typeRadio !=3">
        <el-input v-model="saveForm.component" placeholder="组件" clearable />
      </el-form-item>
      <el-form-item
        label="重定向路径"
        prop="redirectPath"
        v-if="typeRadio != 1&& typeRadio !=3"
      >
        <el-input
          v-model="saveForm.redirectPath"
          placeholder="重定向路径"
          clearable
        />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="saveForm.icon" placeholder="图标" clearable />
      </el-form-item>
      <el-form-item label="排序号" prop="sort">
        <el-input v-model="saveForm.sort" placeholder="排序号" clearable />
      </el-form-item>
      <el-form-item label="是否隐藏" prop="isHidden">
        <el-radio-group v-model="saveForm.isHidden">
          <el-radio :value="0">否</el-radio>
          <el-radio :value="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <div>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd(saveFormRef)">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>
<script setup lang="js">

import { ref,onMounted } from 'vue'
import menu from '@/services/menu'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const permissionData = ref([])
const parentMenu = ref([])

const visible = ref(false)
const saveFormRef = ref()
const saveForm = ref({
    id: '',
    label: '',
    name: '',
    path: '',
    component: '',
    icon: '',
    parentId: '',
    type: '',
    isHidden: '',
    code: ''

})

const rules = ref({
    label: [
        { required: true, message: '请输入中文名称', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
    path: [
        { required: true, message: '请输入路由地址', trigger: 'blur' },
    ],
    type:[
      {required: true, message: '请选择菜单类型', trigger: 'blur' }
    ],
    code: [
    {required: true, message: '请输入权限标识', trigger: 'blur' }
    ],
    // url: [
    // { required: true, message: '请输入访问路径', trigger: 'blur' },
    // ]
})


const init = async () => {
    loading.value = true
    const res = await menu.treeSysMenu({})
    if(res.code == 200) {
        permissionData.value = res.data
        loading.value = false
    }

    const mRes = await menu.listCatalog()
    if(mRes.code===200) {
      parentMenu.value = mRes.data
    }
}

onMounted(()=>{
    init()
})

const handleEdit = (row) => {
   typeRadio.value = row.type
    saveForm.value = JSON.parse(JSON.stringify(row)) // 改过之后的
    visible.value = true

   
}

const handleDelete = async (row) => {
    const res = await menu.deleteByIds([row.id])
    if (res.code === 200) {
        init()
        ElMessage({
            type: 'success',
            message: res.msg
        })
    }
}

let ids = []
const handleSelectionChange =  (value) => {
    ids = []
    value.forEach(e => {
        ids.push(e.id)
    });
}

const handleAddView = async () =>{
    visible.value = true
    saveForm.value = {}
    
}

const handleAdd = async (formRef) => {
    if (!formRef) return
    await formRef.validate((valid, fields) => {
        if (valid) {
            menu.save(saveForm.value).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success'
                    })
                    init()
                }
            })

            visible.value = false
        } else {
            console.log('error submit!', fields)
        }
    })
}

const handleBatchDelete = async () => {
    if(ids.length == 0) {
        throw ElMessage({
            type: 'warning',
            message: "请选择"
        })
    }
    const res = await menu.deleteByIds(ids)
    if (res.code === 200) {
        init()
        ElMessage({
            type: 'success',
            message: res.msg
        })
    }
}

const handleReflesh = () => {
    init()
}

const searchFormRef = ref()
const searchForm = ref({
    label: '',
})
// 搜素
const handleSearch = async () => {
    loading.value = true
    const res = await menu.treeSysMenu(searchForm.value)
    if (res.code === 200) {
        permissionData.value = res.data
        loading.value = false
    }
}
// 搜索重置
const handleSearchReset = (formRef) => {
    formRef.resetFields()
}

const typeRadio = ref()
const handleChangeType = (value) => {
  typeRadio.value = value
}
</script>

<style lang="less" scoped>
.table-btn {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
</style>
